<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园生活 - 中财实验中学</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <nav class="nav">
                <div class="logo">中财实验中学</div>
                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="about.html">学校概况</a>
                    <a href="education.html">教育教学</a>
                    <a href="admission.html">招生信息</a>
                    <a href="campus.html" class="active">校园生活</a>
                    <a href="#">联系我们</a>
                </div>
            </nav>
        </div>
    </header>

    <div class="banner">
        <h1>校园生活</h1>
    </div>

    <div class="container">
        <section class="news-card">
            <h2>学生活动</h2>
            <div class="activity-tabs">
                <div class="tab-buttons">
                    <button class="tab-button active" data-tab="club">社团活动</button>
                    <button class="tab-button" data-tab="sports">体育赛事</button>
                    <button class="tab-button" data-tab="art">艺术节</button>
                </div>
                <div class="tab-content active" id="club">
                    <h3>丰富多彩的社团活动</h3>
                    <p>学校现有30多个学生社团，涵盖学术、科技、艺术、体育等多个领域。</p>
                    <ul>
                        <li>机器人社</li>
                        <li>辩论社</li>
                        <li>合唱团</li>
                        <li>摄影社</li>
                    </ul>
                </div>
                <div class="tab-content" id="sports">
                    <h3>年度体育赛事</h3>
                    <p>每年举办春季运动会和秋季篮球联赛，培养学生团队精神和体育素养。</p>
                </div>
                <div class="tab-content" id="art">
                    <h3>校园艺术节</h3>
                    <p>每年5月举办为期一周的艺术节，展示学生艺术才华。</p>
                </div>
            </div>
        </section>
    </div>

    <footer class="footer">
        <div class="container">
            <p>地址：北京市海淀区学院南路39号</p>
            <p>电话：010-62288888</p>
            <p>© 2025 中财实验中学 版权所有</p>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>